<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>云南公安网安大数据安全监管平台</title>
  <link rel="stylesheet" href="../../assets/css/uikit.css">
  <link rel="stylesheet" href="../../assets/css/style.css">
  <link rel="stylesheet" href="../../assets/icons/style.css">
  <script src="../../scripts/jquery-1.11.3.min.js"></script>
  <script src="nav.js"></script>
  <script src="../../scripts/plugins/jquery.icheck.min.js"></script>
  <script src="../../scripts/plugins/jquery.tablesort.min.js"></script>
  <script src="../../scripts/plugins/jquery.ztree.all.min.js"></script>
  <script src="../../scripts/plugins/select2.min.js"></script>
  <script src="../../scripts/plugins/Sortable.min.js"></script>
  <script src="../../scripts/plugins/jquery.mCustomScrollbar.concat.min.js"></script>
  <script src="../../scripts/lib/echarts-3.7.1/echarts.min.js"></script>
</head>
<body class="sys-body" style="overflow:hidden;">
  <div class="sys-header">
    <div class="sys-logo">
      <h1>云南公安网安大数据安全监管平台</h1>
    </div>

    <div class="sys-menu" id="sys-menu">
      <ul>
        <li>loading......</li>
      </ul>
      <div class="curLine"></div>
    </div>
    <div class="sys-topbar">
      <img src="../../assets/images/_userphoto.png"><span><a href="javascript:void(0);">Admin</a><a href="javascript:void(0);"> 【注销】</a></span>
    </div>
  </div>

  <div class="sys-sidebar">
    <div class="toggle-sidebar"><i class="icon-toleft"></i></div>
    <ul>
      <li class="active"><a href="data-resource.html"><i class="icon-explore"></i><span>资源状态概览</span></a><em class="open"></em>
        <ul>
          <li class="active"><a href="data-resource.html">资源概览</a></li>
        </ul>
      </li>

      <li> <a href="data-traffic..html"><i class="icon-db-search"></i><span>流量分析</span></a><em class="open"></em>
        <ul>
          <li> <a href="data-traffic.html">数据库流量</a></li>
          <li> <a href="data-traffic-ftp.html">FTP流量</a></li>
        </ul>
      </li>

      <li> <a href="data-flow.html"><i class="icon-db-search"></i><span>流向分析</span></a><em class="open"></em>
        <ul>
          <li> <a href="data-flow.html">流向分析</a></li>
          <li><a  href="data-client.html">客户端管理</a></li>
          <li><a href="data-threshold.html">风险阀值配置</a></li>
        </ul>
      </li>

      <li> <a href="data-laws.html"><i class="icon-db-search"></i><span>使用规律分析</span></a><em class="open"></em>
        <ul>
          <li><a href="data-overview.html">概况</a></li>
          <li> <a href="data-laws.html">资源使用规律</a></li>
          <li><a href="data-userlaw.html">用户行为规律</a></li>
        </ul>
      </li>

      <li> <a href="data-riskevent..html"><i class="icon-db-search"></i><span>风险事件</span></a><em class="open"></em>
        <ul>
          <li> <a href="data-riskevent-charts.html">风险概况</a></li>
          <li> <a href="data-riskevent.html">事件查看</a></li>

        </ul>
      </li>

      <li> <a href="data-resourceconfig.html"><i class="icon-notifications-on"></i><span>数据资源管理</span></a><em class="open"></em>
        <ul>
          <li><a href="data-resourceconfig.html">数据资源配置</a></li>
          <li><a href="data-ipconfig.html">参数配置</a></li>
        </ul>
      </li>
    </ul>
  </div>

  <div class="sys-main" id="sys-main">
    <div class="sys-title"><h2>资源概览</h2></div>
    <div class="sys-content">
      <div class="col-9">
        <div class="panel circle">
          <ul>
            <li>
              <strong>资源数目</strong>
              <span>4</span>
            </li>
            <li>
              <strong>流量</strong>
              <span>读入：4万条<br>写入：1千条</span>
            </li>
            <li>
              <strong>风险事件</strong>
              <span>100条</span>
            </li>
          </ul>
        </div>

        <div class="panel resourcebox">
          <div class="col-6">
            <ul>
              <li>
                Oracle-1 <a href="javascript:void(0)" title="管理"><i class="icon-setting"></i></a><a href="javascript:void(0)" class="safetyindex danger" title="风险指数"><strong>88</strong></a>
              </li>
              <li>
                <span class="col-left">流量情况 <a href="javascript:void(0);" title="查看"><i class="icon-eye-o"></i></a></span>
                <span class="col-right"><label class="label fc-danger">读：988934<i class="icon-order-desc"></i> </label> <label class="label fc-success">写：732922<i class="icon-order-asc"></i></label></span>
              </li>
              <li>
                <span class="col-left">风险事件 <a href="javascript:void(0);" title="查看"><i class="icon-eye-o"></i></a></span>
                <span class="col-right"><label class="label label-danger">高：224</label><label class="label label-warning">中：4214</label><label class="label label-primary">低：3214</label></span>
              </li>
              <li>
                <span class="col-left">活跃客户端IP数</span>
                <span class="col-right">917</span>
              </li>
            </ul>
          </div>

          <div class="col-6">
            <ul>
              <li>
                Oracle-2 <a href="javascript:void(0)" title="管理"><i class="icon-setting"></i></a> <a href="javascript:void(0)" class="safetyindex danger" title="风险指数"><strong>98.96</strong></a>
              </li>
              <li>
                <span class="col-left">流量情况 <a href="javascript:void(0);" title="查看"><i class="icon-eye-o"></i></a></span>
                <span class="col-right"><label class="label fc-danger">读：988934<i class="icon-order-desc"></i> </label> <label class="label fc-success">写：732922<i class="icon-order-asc"></i></label></span>
              </li>
              <li>
                <span class="col-left">风险事件 <a href="javascript:void(0);" title="查看"><i class="icon-eye-o"></i></a></span>
                <span class="col-right"><label class="label label-danger">高：224</label><label class="label label-warning">中：4214</label><label class="label label-primary">低：3214</label></span>
              </li>
              <li>
                <span class="col-left">活跃客户端IP数</span>
                <span class="col-right">917</span>
              </li>
            </ul>
          </div>

          <div class="col-6">
            <ul>
              <li>
                Solr-1 <a href="javascript:void(0)" title="管理"><i class="icon-setting"></i></a><a href="javascript:void(0)" class="safetyindex" title="风险指数"><strong>38.01</strong></a>
              </li>
              <li>
                <span class="col-left">流量情况 <a href="javascript:void(0);" title="查看"><i class="icon-eye-o"></i></a></span>
                <span class="col-right"><label class="label fc-danger">读：988934<i class="icon-order-desc"></i> </label><label class="label fc-success">写：732922<i class="icon-order-asc"></i></label></span>
              </li>
              <li>
                <span class="col-left">风险事件 <a href="javascript:void(0);" title="查看"><i class="icon-eye-o"></i></a></span>
                <span class="col-right"><label class="label label-danger">高：224</label><label class="label label-warning">中：4214</label><label class="label label-primary">低：3214</label></span>
              </li>
              <li>
                <span class="col-left">活跃客户端IP数</span>
                <span class="col-right">917</span>
              </li>
            </ul>
          </div>

          <div class="col-6">
            <ul>
              <li>
                HBASE-1 <a href="javascript:void(0)" title="管理"><i class="icon-setting"></i></a><a href="javascript:void(0)" class="safetyindex" title="风险指数"><strong>78.47</strong></a>
              </li>
              <li>
                <span class="col-left">流量情况 <a href="javascript:void(0);" title="查看"><i class="icon-eye-o"></i></a></span>
                <span class="col-right"><label class="label fc-danger">读：988934<i class="icon-order-desc"></i> </label> <label class="label fc-success">写：732922<i class="icon-order-asc"></i></label></span>
              </li>
              <li>
                <span class="col-left">风险事件 <a href="javascript:void(0);" title="查看"><i class="icon-eye-o"></i></a></span>
                <span class="col-right"><label class="label label-danger">高：224</label><label class="label label-warning">中：4214</label><label class="label label-primary">低：3214</label></span>
              </li>
              <li>
                <span class="col-left">活跃客户端IP数</span>
                <span class="col-right">917</span>
              </li>
            </ul>
          </div>
        </div>
      </div>


      <div class="col-3">
        <div class="panel">
          <div id="chart" style="height:180px;padding-top:20px;">loading......</div>
          <div class="panel-head">
            <div class="panel-title"><h3>风险事件</h3></div>
            <a class="fr" href="data-riskevent.html">+查看更多</a>
          </div>
          <div class="panel-body scrollbar" style="height:550px;padding-bottom:20px;">
            <ul class="event-list event-resourcebox">
              <li><span>2017-08-24 14:21:34</span><span>违规时间段访问规则<label class="badge badge-danger">高</label></span><span>客户端：172.8.9.1</span><span><em class="fc-danger">数据删除：</em>hbase1</span></li>
              <li><span>2017-08-24 14:21:34</span><span>违规时间段访问规则<label class="badge">低</label></span><span>客户端：172.8.9.1</span><span>数据查询：hbase1</span></li>
              <li><span>2017-08-24 14:21:34</span><span>违规时间段访问规则<label class="badge badge-danger">高</label></span><span>客户端：172.8.9.1</span><span><em class="fc-danger">数据删除：</em>hbase1</span></li>
              <li><span>2017-08-24 14:21:34</span><span>违规时间段访问规则<label class="badge badge-danger">高</label></span><span>客户端：172.8.9.1</span><span><em class="fc-danger">数据删除：</em>hbase1</span></li>
              <li><span>2017-08-24 14:21:34</span><span>违规时间段访问规则<label class="badge badge-danger">高</label></span><span>客户端：172.8.9.1</span><span><em class="fc-danger">数据删除：</em>hbase1</span></li>
              <li><span>2017-08-24 14:21:34</span><span>违规时间段访问规则<label class="badge badge-warning">中</label></span><span>客户端：172.8.9.1</span><span>数据写入：hbase1</span></li>
              <li><span>2017-08-24 14:21:34</span><span>违规时间段访问规则<label class="badge badge-danger">高</label></span><span>客户端：172.8.9.1</span><span><em class="fc-danger">数据删除：</em>hbase1</span></li>
              <li><span>2017-08-24 14:21:34</span><span>违规时间段访问规则<label class="badge">低</label></span><span>客户端：172.8.9.1</span><span>数据查询：hbase1</span></li>
              <li><span>2017-08-24 14:21:34</span><span>违规时间段访问规则<label class="badge badge-danger">高</label></span><span>客户端：172.8.9.1</span><span><em class="fc-danger">数据删除：</em>hbase1</span></li>
              <li><span>2017-08-24 14:21:34</span><span>违规时间段访问规则<label class="badge">低</label></span><span>客户端：172.8.9.1</span><span>数据查询：hbase1</span></li>
              <li><span>2017-08-24 14:21:34</span><span>违规时间段访问规则<label class="badge badge-danger">高</label></span><span>客户端：172.8.9.1</span><span><em class="fc-danger">数据删除：</em>hbase1</span></li>
              <li><span>2017-08-24 14:21:34</span><span>违规时间段访问规则<label class="badge badge-warning">中</label></span><span>客户端：172.8.9.1</span><span>数据写入：hbase1</span></li>
            </ul>
          </div><!--panel-body end-->
        </div>
      </div>

    </div>
  </div>


</body>
</html>
<script>
  (function($){
    $(window).load(function(){
      $(".scrollbar").mCustomScrollbar({
        autoHideScrollbar:true,
        advanced:{
          autoExpandHorizontalScroll:true
        }
      });
    });
  })(jQuery);


  $(document).ready(function(){
    $(".source-item").on("click", "strong",function() {
     if($(this).parents(".source-item").hasClass('open')){
      $(this).parents(".source-item").removeClass('open');
      $(this).parent().next("ul").show();
    }
    else{
      $(this).parents(".source-item").addClass('open');
      $(this).parent().next("ul").hide();
    }
  })

    $(".source-tit").on("click","a",function(){
      $("#add").show();
    })

    $(".source-item p ").on("click","a:eq(1)",function(){
      $("#add").show();
    })
    $(".source-item li ").on("click","a:eq(0)",function(){
      $("#e22").val($(this).parents("dd").find("span").text())
      $("#edit").show();
    })

    $(".source-item li ").on("click","a[title='修改']",function(){
      $("#edit").show();
    })


    $("#createbtn").on("click",function(){
      $("#create").slideToggle(200);
    })


    $(".dialog .close,#cancel").on("click",function(){
      $(".dialog").hide();
    })
    // $.fn.zTree.init($("#dblist"), setting, zNodes);

    $(".field").on("click", "button", function() {
      $(this).next("ul").slideToggle(200);
    })

    $(".field").on("click", "li", function() {
      if($(this).hasClass('checked')) {

        if($(this).index()<3){
          alert("不能删除有数据的资源类型");
          return
        }

        $(".col-9 .source-box:eq("+$(this).index()+")").hide();
        $(this).removeClass('checked');
      }else{
       $(".col-9 .source-box:eq("+$(this).index()+")").show();
       $(this).addClass('checked');
     }

   })

  })

var option = {
  title: {
    text: '安全指数',
    "x": "center",
    "y":"bottom"

  },
  series: [{
    type: 'gauge',
    radius: '100%',
    splitNumber: 10,
/*    axisLabel: {
      formatter: function(e) {
        switch (e + "") {
          case "20":
          return "安全";
          case "40":
          return "良好";
          case "60":
          return "一般";
          case "80":
          return "危险";
          case "100":
          return "高危";
          default:
          return e;
        }
      },
      textStyle: {
        fontSize: 15,
        fontWeight: ""
      }
    },*/

    axisLine: {
      lineStyle: {
        width: 6,
        color: [[0.2, '#7ab30d'],[0.4, '#7ab30d'],[0.6, '#7ab30d'],[0.8, '#fb8600'],[1, '#d92738']]
      }
    },
            axisTick: {            // 坐标轴小标记
                length: 10,        // 属性length控制线长
                lineStyle: {       // 属性lineStyle控制线条样式
                  color: 'auto'
                }
              },
            splitLine: {           // 分隔线
                length: 14,         // 属性length控制线长
                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                  color: 'auto'
                }
              },
              detail: {
                textStyle: {
                  fontSize: 20,
                }
              },
              data: [{
                // name: "风险指数",
                value: 50
              }]
            }]
          };
          setInterval(function() {
            option.series[0].data[0].value = (Math.random() * 50).toFixed(2) - 0;
            var myChart = echarts.init(document.getElementById('chart'));
            myChart.setOption(option, true);
          }, 2000);
        </script>